<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>课程管理</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <link rel="stylesheet" href="/css/navbar.css">
</head>
<body>
<!-- 导航栏 -->
<div th:replace="navbar :: ~{*}"></div>
<div>
    <div>
        <h1>课程管理</h1>
        <button type="button" data-bs-toggle="modal" data-bs-target="#formModalAdd">新增</button>
    </div>
    <div>
        <form th:action="@{courses/search}" method="get">
            <div>
                <label>课程名称</label>
                <input type="text" th:value="${name}" name="name" placeholder="请输入课程名称">
            </div>
            <button type="submit">查询</button>
        </form>
    </div>
    <div>
        <table>
            <thead>
            <tr>
                <th>课程ID</th>
                <th>课程名称</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr th:if="${courses.isEmpty()}">
                <td colspan="2">无相关数据</td>
            </tr>
            <tr th:each="course:${courses}">
                <td th:text="${course.course_id}"></td>
                <td th:text="${course.course_name}"></td>
                <td>
                    <button type="button"
                            class="edit-course-btn"
                            th:data-id="${course.course_id}"
                            th:data-name="${course.course_name}"
                            data-bs-toggle="modal"
                            data-bs-target="#formModalEdit">
                        修改
                    </button>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
</div>

<!-- 添加课程弹窗 -->
<div id="formModalAdd" class="modal fade" tabindex="-1" aria-labelledby="formModalAddLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 id="formModalAddLabel" class="modal-title">添加课程</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form th:action="@{courses}" th:object="${course}" method="post">
                    <div class="mb-3">
                        <label for="addCourseId" class="form-label">课程id</label>
                        <input type="text" id="addCourseId" th:field="*{course_id}" class="form-control" required>
                        <div class="invalid-feedback" th:if="${#fields.hasErrors('course_id')}">
                            <span th:errors="*{course_id}"></span>
                        </div>
                    </div>
                    <div class="mb-3">
                        <label for="addCourseName" class="form-label">课程名称</label>
                        <input type="text" id="addCourseName" th:field="*{course_name}" class="form-control" required>
                        <div class="invalid-feedback" th:if="${#fields.hasErrors('course_name')}">
                            <span th:errors="*{course_name}"></span>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                        <button type="submit" class="btn btn-primary">添加课程</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- 修改课程弹窗 -->
<div id="formModalEdit" class="modal fade" tabindex="-1" aria-labelledby="formModalEditLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 id="formModalEditLabel" class="modal-title">修改课程</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form th:action="@{courses/edit}" th:object="${course}" method="post">
                    <div class="mb-3">
                        <label for="editCourseId" class="form-label">课程ID</label>
                        <input type="text" id="editCourseId" th:field="*{course_id}" class="form-control" readonly>
                    </div>
                    <div class="mb-3">
                        <label for="editCourseName" class="form-label">课程名称</label>
                        <input type="text" id="editCourseName" th:field="*{course_name}" class="form-control" required>
                        <div class="invalid-feedback" th:if="${#fields.hasErrors('course_name')}">
                            <span th:errors="*{course_name}"></span>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                        <button type="submit" class="btn btn-primary">修改课程</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<script th:inline="javascript">
    $(document).ready(function() {
        // 编辑按钮点击事件
        $('.edit-course-btn').click(function() {
            var courseId = $(this).data('id');
            var courseName = $(this).data('name');

            // 填充表单数据
            $('#editCourseId').val(courseId);
            $('#editCourseName').val(courseName);

            // 显示模态框
            $('#formModalEdit').modal('show');
        });
    });
</script>
</body>
</html>